<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script type="text/javascript" src="js/lib/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/lib/json2.js"></script>
	<script type="text/javascript" src="js/lib/geoxml3.js"></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/YMap.js"></script>
	<script type="text/javascript" src="js/GSearch.js"></script>
	<script type="text/javascript" src="js/LocalSearch.js"></script>
	<script type="text/javascript" src="js/MapContextMenu.js"></script>
	<script type="text/javascript" src="js/GoogleDirections.js"></script>
	<script type="text/javascript" src="js/Search.js"></script>
	<script type="text/javascript" src="js/PointOperator.js"></script>
	<script type="text/javascript" src="js/KmlLayer.js"></script>
	<style type="text/css">
			html,body{
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
			background: url(image/bg.png) repeat-x; 
			color: #fff;
			overflow: hidden;
			
		}
		#top{
			height:110px;
			margin-bottom: 3px;
			position: absolute;
            top: 0px;	
		}
		#center{
		    width:100%;
			background-color:#fff;
			color: #106fc1;
			position: absolute;
			top: 113px;	
            bottom: 39px;	
		}
		#bottom{
            width:100%;
			height:30px;
			text-align: center;
			color: #666;
			background-color:#fff;
			position: absolute;
            bottom: 0px;
		}
		/*左面*/
		#left{
			height:100%;
			float:left;
			width:300px;
		}
		/*右面*/
		#content{
		    border:1px solid #888;
		    padding:2px;
			height:100%;
			margin-left: 305px;
		}
		#map{		   
			height:100%;
		}
		#search{		   
			background-color: #fff;			
			margin-bottom: 5px;
		}
		#googlesearch{
			padding-top:10px;
			padding-bottom:10px;
			padding-left: 20px;
			
		}
		#searchimg{
			width:30px;
			height:30px;
			position: fixed;
			margin-left: 5px;
		}
		#topimg{
			width:100%;
			height:100%;
		}
		#searchreturn{
			overflow: auto;
		}
		
		#mainsubtype
		{
			padding-left: 18px;	
		}
		a{
			text-decoration: none;
		}
		.subtype{
			font-size: 15px;
			float: left;
			margin-left: 10px;
		}
		.subtype a{
			position: relative;
			bottom: -4px;
		}
		.maintype{			
			font-size: 20px;
			float: left;
		}
		.maintype:hover ,.subtype:hover{
			background: #e6f0fa;
		} 
		.pointOperator_button{
			width:40px;
			height:30px;
			background-image: url("image/point.png");
			background-repeat: no-repeat;
		}
		.heighlight{
			border-width:1px;
			border-color: #FF5400;
			border-style: solid;
		}		
		/*左面每一个div的标题*/
		.divtitle {
			 background: url(image/div_title_bg.png) repeat-x;
			 height: 25px;			
			 font-weight: bold;
			 font-size: 14px;
			 line-height: 28px;
			 color: #005CA3;
			 padding-left: 28px;			 			
		}
		.result {
			 padding-left: 20px;	
			 padding-top: 5px;
		}
		/*左面查询结果标题的样式*/
		.resulttitle		
		{
			font-size: 16px;
		}
		/*左面查询结果地址邮编链接等内容的样式*/
		.resuldress		
		{
			font-size: 13px;
			color: #000;
			-o-text-overflow: ellipsis;    /* for Opera */
            text-overflow:ellipsis;        /* for IE */
			white-space:nowrap;
			overflow: hidden;
			line-height:18px;
		}
		/*左面查询结果最后类别的样式*/
		.resultype		
		{
			font-size: 13px;
			color: #888;
			-o-text-overflow: ellipsis;    /* for Opera */
            text-overflow:ellipsis;        /* for IE */
			white-space:nowrap;
			overflow: hidden;
			line-height:18px;
		}
		.result:hover {
			background: #e6f0fa;
		} 
		
		#addPointDiv{
			position: absolute;
			top: 10px;
			right: 250px;
			z-index: 1000;
		}
		.clear{
			clear: both;
		}
		#tip{
			width:18px;
			height:18px;
			position: absolute;
			z-index: 10;
			background: url(image/tipl.png) no-repeat;
			border: 1px solid #999999;
			background-color: white;
		}
		
	</style>
  </head>
  
  <body>
    <div id="top">
    	<img id="topimg" src="image/head.png">
    </div>
    <div id="center">
    	<div id="left">
    		<div id="search">
	    	    <div class="divtitle">
	    	    	搜索
	    		</div>    	      
	    		<div id="googlesearch">
	    		</div>   
    		</div>    		
    		<div id="cateSearch">
	    		<div class="divtitle">
	    	       	分类浏览
	    		</div> 
	    		<div id="mainsubtype">
	    			<table>
	    				<tbody></tbody>
	    			</table>
	    		</div>
    		</div>
    		<hr align="right">
		      <div id="searchreturn">  
		    		 <div class="result">   		    
		    			<div class="resulttitle">天坛餐厅</div>
						<div class=resuldress>北京Beijing崇文区天坛东路50号 </div>
						<div class=resuldress>邮编: 100-050 电话：010-81191011</div>
						<div class=resuldress><a href="http://www.tiantanpark.com/cn/">tiantanpark.com</a></div>
						<div class=resultype>类别： 中餐</div> 
					 </div>	
					 <div class="result">   		    
		    			<div class="resulttitle">全聚德烤鸭店（前门店）</div>
						<div class=resuldress>北京市东城区前门大街30号 </div>
						<div class=resuldress> 邮编: 100051</div>
						<div class=resuldress><a href="http://www.qmquanjude.com.cn/">qmquanjude.com.cn</a></div>
						<div class=resultype>类别： 餐饮；餐厅；特色饮食；烤鸭店</div> 
					 </div>	
					 <div class="result">   		    
		    			<div class="resulttitle">民族饭店  </div>
						<div class=resuldress>北京市西城区复兴门内大街51号 </div>
						<div class=resuldress> 邮政编码: 100031  电话：010-66014466</div>
						<div class=resuldress><a href="http://www.china-hotel-booking.com/beijing-hotels/beijing-minzu-hotel-beijing.html">china-hotel-booking.com</a></div>
					 </div>	
	    	</div> 
	    	<div style="clear:both"></div>
    	</div>   	
	   	<div id="content">
	   		<div id="tip"></div>
	   		<div id="addPointDiv"></div>
	   		<div id="map"></div>
	   		<div class="clear"></div>
	   	</div>
    </div>
    <div id="bottom">
    	地图搜索功能，感谢您的使用！！ 作者：袁玉
    </div>
    
    <div id="addpointInfoWindowContent_template" style="display: none">
		<div class="inputField" fieldName="name">
			<span>名字:</span>
			<input type="text"/>
		</div>
		<div class="selectField" fieldName="maintype">
			<span>类别:</span>
			<select></select>
			<input  type="text"></input>
		</div>
		<div class="selectField" fieldName="subtype">
			<span>子类:</span>
			<select></select>
			<input  type="text"></input>
		</div>
		<div class="inputField" fieldName="vicinity">
			<span>描述:</span>
			<textarea rows="5" cols="10"></textarea>
		</div>
		<div class="submitButton">
			<input type="button" value="提交"/>
		</div>
	</div>
  </body>
</html>
